<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_g8rbo5ot3lb.css"> -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div id="app" class="container">
        <div class="imgContent"></div>
        <div class="loginData">
            <div class="websiteName">
                <h3>南声-分享源于热爱</h3>
            </div>
            <div class="info">
                <input id="username" type="text" placeholder="请输入用户名" v-model="loginData.email">
                <span>请输入用户名</span>
            </div>
            <div class="info">
                <input id="password" type="password" placeholder="请输入用户密码" v-model="loginData.password">
                <span>请输入用户密码</span>
            </div>
            <div class="info">
                <button id="submitLogin" @click="submitLogin">登 录</button>
            </div>
            <div class="userOperation">
                <a href="./regist.html">创建一个 ID</a>
            </div>
            <div class="userOperation">
                <a href="#">忘记密码?</a>
            </div>
            <div>
                <i class="iconfont icon-wechat"></i>
                <i class="iconfont icon-qq"></i>
                <i class="iconfont icon-github"></i>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                loginData: {
                    email: '',
                    password: ''
                }
            },
            methods: {
                submitLogin() {
                    if (this.loginData.email != null && this.loginData.password != null && this.loginData.email.trim() != '' && this.loginData.password.trim() != '') {
                        // 发送登录请求
                        postRequest('http://localhost:8080/user/doLogin',this.loginData).then(resp => {
                            if(resp.data){
                                if(resp.data.code == 200){
                                    // 保存登录用户信息
                                    let userData = resp.data.data;
                                    window.sessionStorage.setItem('loginer', JSON.stringify(userData));
                                    // 跳转index页面
                                    window.location.href = './index.html';
                                }
                                else{
                                    alert(resp.data.msg);
                                }
                            }
                        })
                    } else {
                        alert('请正确填写信息');
                    }
                }
            }
        })
    </script>
</body>

</html>